import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { withStyles } from 'material-ui/styles'
import IconButton from 'material-ui/IconButton'
import Avatar from 'material-ui/Avatar'
import MoreVertIcon from 'material-ui-icons/MoreVert'
import Menu, { MenuItem } from 'material-ui/Menu'
import AccountCircle from 'material-ui-icons/AccountCircle';

import avatar from '../../assets/jiqimao.jpeg'

const styles = theme => ({
	menu: {
		display: 'flex',
    flex: 0,
    alignItems: 'center',
	},
  avatar: {
    width: 28,
    height: 28
  },
})

const ITEM_HEIGHT = 48

@withStyles(styles)
class Logged extends Component {
	constructor(props) {
	  super(props)
	  this.state = {
	    anchorEl: null,
	    open: false,
	  }
	}

	onLogoutClick(){
		this.props.logout()
	}

	onMenuClick = event => {
    this.setState({ open: true, anchorEl: event.currentTarget })
  }

  handleMenuClose = () => {
    this.setState({ open: false })
  }

	render() {
	  const {classes} = this.props
		return (
			<div className={classes.menu}>
				<IconButton
          aria-label="More"
          aria-owns={this.state.open ? 'long-menu' : null}
          aria-haspopup="true"
          onClick={this.onMenuClick}>
          <AccountCircle />
        </IconButton>
        <Menu
          id="long-menu"
          anchorEl={this.state.anchorEl}
          open={this.state.open}
          onRequestClose={this.handleMenuClose}
          PaperProps={{
            style: {
              maxHeight: ITEM_HEIGHT * 2.5,
              width: 100,
            },
          }}
        >
          <MenuItem className={classes.menuItem}>
          	<Link to="/admin">
            	管理后台
            </Link>
          </MenuItem>
          <MenuItem className={classes.menuItem} onClick={this.onLogoutClick.bind(this)}>
            退出登录
          </MenuItem>
        </Menu>
			</div>
	  )
	}
}

export default Logged